<template>
	<view class="box">
		<view class="guarantee-box">
			<view class="guarantee-title">
				保障人变更规则
			</view>
			<view class="guarantee-con">
				<text>1、蜜袋互助保障人只能变更为家人或朋友，变更后互助计划的管理还在当前用户账户下进行管理；</text>
				<text>2、变更后，现保障人（变更前保障人）35万互助金将立即失效，新保障人（变更后保障人）需重新确认健康要求，并重新计算180天等待期。</text>
				<text>3、激活成功30天后可变更保障人，每年可变更1次，变更后24小时内生效，变更完成不可撤销。</text>
			</view>
			<view class="guarantee-bottom flex flai">
				<view class="" @click="backPrev">
					我再想想
				</view>
				
				<view class="" @click="toSalef">
					确认变更
				</view>
			</view>
			<view class="guarantee-rule flex flai">
				<view class="checkbox" @click="agree">
					<image src="../../static/image/checkBoxSelect.png" mode="" v-if="isChecked"></image>
					<image src="../../static/image/checkBox.png" mode="" v-else></image>
				</view>
					<!-- <navigator :url="'/pages/protocol/health?id='+item.id+'&index='+index+'&planId='+planId" v-for="(item,index) in ruleList.list">《{{item.name}}》</navigator> -->
				<text>我已阅读并同意</text>
				<navigator :url="'/pages/protocol/health?planId='+planId+'&index=0'+'&type=1'">《蜜袋互助会员协议》</navigator>
				
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/index.js'
	export default {
		data () {
			return {
				isChecked:false,
				orderId:'',
				planId:'1',
				ruleList:[]
			}
		},
		onLoad(opt) {
			this.orderId=opt.orderId
			this.planId = opt.planid
		},
		mounted() {
			
		},
		methods:{
			// 返回上一页
			backPrev(){
				uni.navigateBack({
					delta:1
				})
			},
			// 是否同意协议
			agree () {
				this.isChecked=!this.isChecked
			},
			// 保存
			toSalef(){
				if (this.isChecked) {
					uni.navigateTo({
						url:'/pages/myMutualHelp/changeSafePerson/changeSafePerson?orderId='+ this.orderId +'&planId='+this.planId
					})
				} else {
					uni.showToast({
						title:'请选择阅读并勾选协议',
						icon:'none'
					})
				}
			
			}
		}
	}
</script>

<style>
	@import "../../static/css/common.css";
	@import url("./myMutualHelp.css");
	.guarantee-rule text {
	color: #A5A5AD;
	font-size: 20rpx;
}

.guarantee-rule navigator {
	color: #a5a5ad;
	font-size: 20rpx;
	display: inline;
}

</style>
